<template>
  <a-card :bordered="false">
    <a-space :size="50" style="margin-left: 20px;">
      <!-- 头像 -->
      <a-upload
        list-type="picture-card"
        :action="FILE_UPLOAD_URL"
        :file-list="fileList"
        :show-upload-button="true"
        :show-file-list="false"
        @change="uploadChange"
        @success="uploadAvatar"
      >
        <template #upload-button>
          <a-avatar
            v-if="fileList.length"
            class="info-avatar"
            :size="80"
          >
            <template #trigger-icon>
              <icon-camera />
            </template>
            <img
              v-if="fileList.length"
              :src="fileList[0].url"
              alt=""
            />
          </a-avatar>
        </template>
      </a-upload>

      <!-- 描述-->
      <a-descriptions
        align="left"
        layout="inline-horizontal"
        :data="renderData"
        :column="2"
        :label-style="{
          width: '100px',
          fontWeight: 'normal',
          color: 'rgb(var(--gray-8))',
        }"
        :value-style="{
          width: '240px',
          paddingLeft: '8px',
          textAlign: 'left',
        }"
      >
        <template #label="{ label }">
          {{ $t(label) }} :
        </template>
        <template #value="{ value, data }">
          <template v-if="data.label === '职位' || data.label === '角色'">
            <a-tag
              v-for="(item, index) of value"
              color="blue"
              :key="index"
            >
              {{ item }}
            </a-tag>
          </template>
          <template v-else-if="data.label === '部门'">
            <a-tag color="blue">
              {{ value }}
            </a-tag>
          </template>
          <span v-else>
            {{ value }}
          </span>
        </template>
      </a-descriptions>
    </a-space>
  </a-card>
</template>

<script lang="ts" setup>
import { ref, onMounted, computed } from 'vue';
import { useUserStore } from '@/store';
import { updateAvatar } from '@/api/system/user';
import { Message } from '@arco-design/web-vue';
import { FILE_UPLOAD_URL } from '@/api/system/file';
import type { FileItem } from '@arco-design/web-vue/es/upload/interfaces';
import type { DescData } from '@arco-design/web-vue/es/descriptions/interface';

const userStore = useUserStore();

const renderData = computed(() => {
  return [
    {
      label: 'userSetting.label.name',
      value: userStore.userName
    },
    {
      label: 'userSetting.label.accountId',
      value: userStore.userId
    },
    {
      label: 'userSetting.label.phone',
      value: userStore.phone
    },
    {
      label: '部门',
      value: userStore.deptName
    },
    {
      label: '职位',
      value: userStore.postNames
    },
    {
      label: '角色',
      value: userStore.roleNames
    },
    {
      label: 'userSetting.label.registrationDate',
      value: userStore.createTime
    },
    {
      label: '最近登录时间',
      value: userStore.loginDate
    }
  ] as DescData[];
});

const fileList = ref<FileItem[]>([]);

const uploadChange = (fileItemList: FileItem[], fileItem: FileItem) => {
  fileList.value = [fileItem];
};

const uploadAvatar = (fileItem: FileItem) => {
  updateAvatar(fileItem.response.data.fileId).then(res => {
    Message.success('上传成功');
  });
};

onMounted(() => {
  fileList.value = userStore.arcoDesignFiles;
});
</script>

<style scoped lang="less">
.arco-card {
  padding: 14px 0 4px 4px;
  border-radius: 4px;
}

:deep(.arco-avatar-trigger-icon-button) {
  width: 32px;
  height: 32px;
  line-height: 32px;
  background-color: #e8f3ff;

  .arco-icon-camera {
    margin-top: 8px;
    color: rgb(var(--arcoblue-6));
    font-size: 14px;
  }
}
</style>
